﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Excel Like Slicer Structure</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            $(".option-row").find("input").attr("disabled", true);
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            spread.isPaintSuspended(true);
            var sheet = spread.getActiveSheet();
            dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
            data = [
                ["bob", "NewYork", "1968/6/8", "man", "80", "180"],
                ["Betty", "NewYork", "1972/7/3", "woman", "72", "168"],
                ["Gary", "NewYork", "1964/3/2", "man", "71", "179"],
                ["Hunk", "Washington", "1972/8/8", "man", "80", "171"],
                ["Cherry", "Washington", "1986/2/2", "woman", "58", "161"],
                ["Eva", "Washington", "1993/2/15", "woman", "71", "180"]];
            sheet.addTableByDataSource("table1", 1, 1, data);
            var table = sheet.findTableByName("table1");
            table.setColumnName(0, dataColumns[0]);
            table.setColumnName(1, dataColumns[1]);
            table.setColumnName(2, dataColumns[2]);
            table.setColumnName(3, dataColumns[3]);
            table.setColumnName(4, dataColumns[4]);
            table.setColumnName(5, dataColumns[5]);

            var slicer0 = sheet.addSlicer("slicer1", "table1", "Name");
            slicer0.position(new GcSpread.Sheets.Point(230, 80));

            var slicer1 = sheet.addSlicer("slicer2", "table1", "City");
            slicer1.position(new GcSpread.Sheets.Point(440, 80));

            bindSlicerEvent(spread);
            spread.isPaintSuspended(false);
        });
        
        function bindSlicerEvent(spread) {
            spread.bind(GcSpread.Sheets.Events.SlicerChanged, function (event, args) {
                var sheet = args.sheet;
                var slicer = args.slicer;
                if (!slicer) {
                    return;
                }
                var propertyName = args.propertyName;
                if (propertyName === "isSelected") {
                    if (slicer.isSelected()) {
                        $(".option-row").find("input").attr("disabled", false);
                        var selectedSlicers = getSelectedSlicers(sheet);
                        if (selectedSlicers && selectedSlicers.length > 1) {
                            $("#slicer_name").attr("disabled", true);
                            clearSlicerSetting();
                        }
                        else if (selectedSlicers.length === 1) {
                            initSlicerSetting(slicer);
                        }
                    }
                    else {
                        $(".option-row").find("input").attr("disabled", true);
                    }
                }
            });

            var sheet = spread.getActiveSheet();
            // slicer name
            $("#slicer_name").bind("input", { "sheet": sheet }, function (e) {
                var sheet = e.data && e.data.sheet;
                var name = $(this).val();
                var isSameName = isExistedName(sheet, name);
                if (isSameName === true) {
                    alert("Duplicated slicer name.");
                    return;
                }
                else if (isSameName === false) {
                    setSlicerProperty(e.data, "name", name);
                }
            });

            // slicer caption name
            $("#slicer_caption_name").bind("input", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "captionName", $(this).val());
            });

            // slicer header
            $("#show_header").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "showHeader", $(this).prop("checked"));
            });
            
            // slicer show no data items
            $("#show_nodata_items").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "showNoDataItems", $(this).prop("checked"));
            });

            // slicer show no data items last
            $("#show_nodata_items_last").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "showNoDataItemsInLast", $(this).prop("checked"));
            });

            // slicer visually no data items
            $("#visually_nodata_items").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "visuallyNoDataItems", $(this).prop("checked"));
            });
        }

        function setSlicerProperty(data, property, value) {
            var sheet = data && data.sheet;
            if (!needChangeSlicer(sheet)) {
                return;
            }
            var selectedSlicers = getSelectedSlicers(sheet);
            for (var item in selectedSlicers) {
                var slicer = selectedSlicers[item];
                switch (property) {
                    case "name":
                        slicer.name(value);
                        break;
                    case "captionName":
                        slicer.captionName(value);
                        break;
                    case "showHeader":
                        slicer.showHeader(value);
                        break;
                    case "showNoDataItems":
                        slicer.showNoDataItems(value);
                        break;
                    case "showNoDataItemsInLast":
                        slicer.showNoDataItemsInLast(value);
                        break;
                    case "visuallyNoDataItems":
                        slicer.visuallyNoDataItems(value);
                        break;
                }
            }
        }

        function isExistedName(sheet, name) {
            if (!sheet) {
                return null;
            }
            var slicers = sheet.getSlicers();
            if (!slicers || $.isEmptyObject(slicers)) {
                return null;
            }
            for (var item in slicers) {
                var slicer = slicers[item];
                if (!slicer.isSelected() && slicer.name() === name) {
                    return true;
                }
            }
            return false;
        }

        function initSlicerSetting(slicer) {
            $("#slicer_name").val(slicer.name());
            $("#slicer_caption_name").val(slicer.captionName());
            $("#show_header").prop("checked", slicer.showHeader());
            $("#show_nodata_items").prop("checked", slicer.showNoDataItems());
            $("#show_nodata_items_last").prop("checked", slicer.showNoDataItemsInLast());
            $("#visually_nodata_items").prop("checked", slicer.visuallyNoDataItems());
        }

        function clearSlicerSetting() {
            $("#slicer_name").val("");
            $("#slicer_caption_name").val("");
            $("#show_header").prop("checked", false);
            $("#show_nodata_items").prop("checked", false);
            $("#show_nodata_items_last").prop("checked", false);
            $("#visually_nodata_items").prop("checked", false);
        }

        function getSelectedSlicers(sheet) {
            if (!sheet) {
                return null;
            }
            var slicers = sheet.getSlicers();
            if (!slicers || $.isEmptyObject(slicers)) {
                return null;
            }
            var selectedSlicers = [];
            for (var item in slicers) {
                var slicer = slicers[item];
                if (slicer.isSelected()) {
                    selectedSlicers.push(slicer);
                }
            }
            return selectedSlicers;
        }

        function needChangeSlicer(sheet) {
            if (!sheet) {
                return false;
            }
            var selectedSlicers = getSelectedSlicers(sheet);
            if (!selectedSlicers || selectedSlicers.length === 0) {
                return false;
            }
            return true;
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 370px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="slicer_name" style="display: inline-block;width: 150px">Name:</label>
                <input type="text" id="slicer_name" />
            </div>
            <div class="option-row">
                <label for="slicer_caption_name" style="display: inline-block;width: 150px">Caption Name:</label>
                <input type="text" id="slicer_caption_name" />
            </div>
            <div class="option-row">
                <input type="checkbox" id="show_header" checked />
                <label for="show_header">ShowHeader</label>
                <input type="checkbox" id="show_nodata_items" checked />
                <label for="show_nodata_items">ShowNoDataItems</label>
            </div>
            <div class="option-row">
                <input type="checkbox" id="show_nodata_items_last" />
                <label for="show_nodata_items_last">ShowNoDataItemsInLast</label>
                <input type="checkbox" id="visually_nodata_items" checked />
                <label for="visually_nodata_items">VisuallyNoDataItems</label>
            </div>
        </div>
    </div>
</body>
</html>
